<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../libs/Vue1/vue.js"></script>
</head>
<body>

<div v-my-directive="someValue"></div>

<div id="demo" v-demo="LightSlateGray : msg"></div>


<script>
    Vue.directive('my-directive', {
        bind: function () {
            // 做绑定的准备工作
            // 比如添加事件监听器，或是其他只需要执行一次的复杂操作
        }, update: function (newValue, oldValue) {
            // 根据获得的新值执行对应的更新
            // 对于初始值也会被调用一次
        }, unbind: function () {
            // 做清理工作
            // 比如移除在 bind() 中添加的事件监听器
        }
    })


    Vue.directive('demo', {
        bind: function () {
            this.el.style.color = '#fff'
            this.el.style.backgroundColor = this.arg
        },
        update: function (value) {
            this.el.innerHTML =
                    'name - ' + this.name + '<br>' +
                    'raw - ' + this.raw + '<br>' +
                    'expression - ' + this.expression + '<br>' +
                    'argument - ' + this.arg + '<br>' +
                    'value - ' + value
        }
    });

    var demo = new Vue({
        el: '#demo',
        data: {
            msg: 'hello!'
        }
    })
</script>
</body>
</html>